<template>
	<view class="jf-popup-fixed" v-if="props.modelValue" @click="close()" @touchmove.prevent.stop></view>
	<view class="jf-popup" v-if="props.modelValue" @touchmove.prevent.stop>
		<view class="jf-popup-top" v-if="props.showTitle">
			<view class="jf-popup-top-btn jf-popup-top-cancel" @click="cancel()">{{props.cancelText}}</view>
			<view class="jf-popup-top-title">{{props.title}}</view>
			<view class="jf-popup-top-btn jf-popup-top-confirm" @click="confirm()">{{props.confirmText}}</view>
		</view>
		<view
			class="jf-popup-content"
			:style="{
				'--height': props.height,
				'paddingBottom': data.safeAreaInsets.bottom * data.ratio + 'rpx'
			}"
			v-if="!props.scroll">
			<slot></slot>
		</view>
		<scroll-view
			scroll-y="true"
			class="jf-popup-scroll"
			:style="{
				'--height': props.height
			}"
			@scrolltolower="scrolltolower"
			v-else>
			<view
				class="jf-popup-scroll-content"
				:style="{
					'paddingBottom': data.safeAreaInsets.bottom * data.ratio + 'rpx'
				}">
				<slot></slot>
			</view>
		</scroll-view>
	</view>
</template>

<script lang="ts" setup>
	import { onMounted, nextTick, reactive } from 'vue';
	
	const props = withDefaults(defineProps<{
		modelValue?: boolean
		disabled?: boolean
		cancelText?: string
		confirmText?: string
		title?: string
		showTitle?: boolean
		scroll?: boolean
		height?: string
		loading?: boolean
	}>(),{
		modelValue: false,
		disabled: false,
		cancelText: '取消',
		confirmText: '确定',
		title: '',
		showTitle: true,
		scroll: false,
		height: '460rpx',
		loading: false
	})
	const emits = defineEmits<{
		(e: 'update:modelValue', value: boolean):void
		(e: 'cancel'):void
		(e: 'confirm'):void
		(e: 'close'):void
		(e: 'scrolltolower', event:any):void
	}>()
	const data = reactive({
		ratio: 1,
		safeAreaInsets: {
			bottom: 0
		}
	})
	
	const close = ():void => {
		emits('update:modelValue', false)
		emits('close')
	}
	const cancel = ():void => {
		if(props.disabled) return
		emits('update:modelValue', false)
		emits('cancel')
	}
	const confirm = ():void => {
		if(props.disabled) return
		emits('update:modelValue', false)
		emits('confirm')
	}
	const scrolltolower = (event:any):void => {
		if(!props.loading){
			emits('scrolltolower', event)
		}
	}
	
	onMounted(() => {
		nextTick(() => {
			uni.getSystemInfo({
				success: ( result:any ):void => {
					data.ratio = 750 / result.screenWidth
					data.safeAreaInsets = result.safeAreaInsets
				}
			})
		})
	})
</script>

<style lang="scss">
	.jf-popup-fixed{
		position: fixed;
		z-index: 100;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.4);
	}
	.jf-popup{
		--popup-width: 100vw;
		position: fixed;
		z-index: 101;
		bottom: 0;
		left: 0;
		--popup-height: 660rpx;
		--popup-top-height: 144rpx;
		width: var(--popup-width);
		border-radius: 48rpx 48rpx 0 0;
		background: #ffffff;
		overflow: hidden;
		.jf-popup-top{
			position: relative;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			width: var(--popup-width);
			height: var(--popup-top-height);
			border-bottom: 2rpx solid #ECECEC;
			.jf-popup-top-btn{
				position: absolute;
				top: 12rpx;
				font-size: 28rpx;
				color: #0069FF;
				font-weight: 400;
				line-height: 40rpx;
				padding: 40rpx;
				&.jf-popup-top-cancel{
					left: 0;
				}
				&.jf-popup-top-confirm{
					right: 0;
				}
			}
			.jf-popup-top-title{
				padding: 0 50rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #161D26;
				line-height: 40rpx;
				box-sizing: border-box;
			}
		}
		.jf-popup-content{
			width: var(--popup-width);
			min-height: var(--height);
		}
		.jf-popup-scroll{
			width: var(--popup-width);
			height: var(--height);
			.jf-popup-scroll-content{
				width: var(--popup-width);
			}
		}
	}
</style>
